<template lang="pug">
.list
  filter-modal(:show="showFilter")
  .list-header
    .header-search
      .header-search-icon.iconfont.icon-search
      input.header-search-input(placeholder="请输入关键词" v-model="keyword" @input="search")
    .header-cate(@click="toggleFilter") 分类
  .list-info 已选：{{currentValue}}
  .list-content(ref="scroller")
    .sample-item(v-for="item in list")
      .sample-item-body(@click="seeDetail(item)")
        .sample-item-bg(:style="`background-image: url(${item.mainFileUrl})`")
        .sample-item-bd
          .sample-item-name {{item.sampleName}}
          .sample-item-cate {{item.sampleCategoryNamePath}}
    .sample-empty(v-if="!list.length")
      img.empty-img(src="../static/images/empty_.png")
      .empty-txt 暂未检测到数据~~~
</template>

<script>
import { getPageList } from 'api'
import { mapActions, mapState } from 'vuex'
import filterModal from '@/components/filterModal'
let timers = null
export default {
  name: 'list',
  data () {
    return {
      pageSize: 20,
      currentPage: 1,
      list: [],
      showFilter: false,
      keyword: '',
    }
  },
  components: {
    filterModal
  },
  watch: {
    classificationId (v) {
      this.getList()
    }
  },
  computed: {
    ...mapState({
      classificationId: state => state.ui.screening.classificationId,
      currentValue: state => state.ui.screening.currentValue
    })
  },

  methods: {
    ...mapActions([
      'changeScreening'
    ]),
    search () {
      if (timers) clearTimeout(timers)
      timers = setTimeout(() => {
        this.getList()
      }, 500)
    },
    seeDetail (item) {
      this.$router.push({ name: 'detail', params: { id: item.materialsSampleId } })
    },
    toggleFilter () {
      this.changeScreening({ show: true })
    },
    debounce (fn, delay) {
      let timer = null
      return function () {
        if (timer) {
          clearTimeout(timer)
        } else {
          timer = setTimeout(() => {
            fn()
          }, delay)
        }
      }
    },
    initScroller () {
      const sc = this.$refs.scroller
      sc.addEventListener('scroll', e => {
        this.debounce(this.loadMore(), 6000)
      })
    },
    async loadMore () {
      try {
        if (this.isLoading || this.isLoaded) return
        this.isLoading = true
        let query = {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
        if (this.keyword) query.keyword = this.keyword
        if (this.classificationId) query.classificationId = this.classificationId
        const { ResultSet } = await this.$axios.post(getPageList, { ...query })
        window.requestAnimationFrame(() => {
          this.list.push(...ResultSet.userData.data)
        })
        this.currentPage += 1
        if (!ResultSet.userData.data.length || ResultSet.userData.data.length < this.pageSize) this.isLoaded = true
        this.$nextTick(() => {
          this.isLoading = false
        })
      } catch (err) {
        console.log(err)
      }
    },
    async getList () {
      try {
        this.currentPage = 1
        let query = {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
        if (this.keyword) query.keyword = this.keyword
        if (this.classificationId) query.classificationId = this.classificationId
        const { ResultSet } = await this.$axios.post(getPageList, { ...query })
        this.list = ResultSet.userData.data
        this.currentPage += 1
      } catch (err) {
        console.log(err)
      }
    }
  },
  mounted () {
    this.initScroller()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getList()
    })
  }
}
</script>

<style lang="scss" scoped>
.list {
  height: 100%;
  background: #f5f5f5;
}
.list-header {
  padding: 20px 60px;
  height: 74px;
  display: flex;
  align-items: center;
}
.header-search {
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe6;
  background: #fff;
  height: 50px;
  flex: 1;
  border-radius: 50px;
  padding: 1px 10px;
  .iconfont {
    font-size: 25px;
  }
  .header-search-input {
    flex: 1;
    height: 100%;
    padding: 0 5px;
    font-size: 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
  }
}
.header-cate {
  margin-left: 30px;
  font-size: 20px;
  color: #CD9E78;
  cursor: pointer;
}
.list-info {
  height: 50px;
  font-size: 18px;
  color: #999;
  padding: 0 60px;
}
.list-content {
  height: calc(100% - 50px - 74px);
  padding: 0 40px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
}
.sample-item {
  width: 25%;
  padding: 0 20px;
  margin-bottom: 20px;
}
.sample-item-body {
  background: #fff;
  padding: 15px;
  border-radius: 5px;
  // box-shadow: 0px 2px 20px 0px rgba(54, 54, 54, 0.5);
}
.sample-item-bg {
  width: 100%;
  height: 170px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.sample-item-bd {
  padding: 15px 0;
}
.sample-item-name {
  font-size: 18px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sample-item-cate {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sample-empty {
  margin: 100px auto;
  font-size: 24px;
  text-align: center;
  color: #999;
  text-align: center;
  .empty-img {
    margin-bottom: 20px;
  }
}
</style>